<template>
<!-- 弹出框的封装 -->
  	<el-dialog
			v-model="isOption"
			:width="props.width"
			draggable
			:before-close="beforeClose"
		>
		<template #header>
			<span style="color:#333">{{props.title}}</span>
			<slot name="header"></slot>
		</template>
		
		<slot></slot>
			<template #footer v-if="!props.showButton">
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button
						type="primary"
						@click="sure"
					>确 定</el-button>
				</span>
			</template>
		</el-dialog>
</template>

<script setup>
import { onMounted, ref, watch } from "vue"

const props = defineProps({
	// 是否显示
    isVisible:Boolean,
	// 顶部标题
	title:String,
	// 控制是否显示底部按钮
	showButton:{
		type:Boolean,
		define:false
	},
	width:{
		type:String,
		define:"30%"
	}
})


const isOption = ref(false)
const emit = defineEmits(["submit","close"])

// 点击确定后执行对应的操作
const sure = () => {
    emit("submit")
}

// 点击取消后执行对应的操作
const cancel = ()=> {
	emit("close")
}

// 关闭之前的函数 避免使用别的方式退出导致父元素的isVisible没有被修改
const beforeClose = () => {
	cancel()
}

watch(() =>props.isVisible, (val) => {
	isOption.value = val
},{immediate:true} )

</script>

<style lang="scss" scoped>

</style>